<template>
  <div class="bigBox">
    <div class="left">
      <button @click="openUser()">新建用户</button>
      <input
        type="text"
        v-model="searchUserName"
        placeholder="输入用户名可搜索"
        @compositionstart="flag = false"
        @compositionend="flag = true"
        @input="searchUser"
      />
      <i class="fa fa-search" aria-hidden="true"></i>
      <div class="tree-wrapper">
        <div class="outsize">
          <div class="one-list">
            <i :class="icon" @click="changeShow"></i>
            <div class="checkbox-title">
              <span @click="changeShow">所有部门</span>
              <div class="btn all-btn">
                <button class="leftBox-btn" @click="getAllSortMsg">
                  排序
                </button>
                <button class="leftBox-btn" @click="openAllGroup">
                  添加
                </button>
              </div>
            </div>
          </div>
        </div>
        <i-tree :list="treeData" v-show="showChild"></i-tree>
      </div>
    </div>
    <div :class="[open ? 'right' : 'right disappear']">
      <i-table
        id="addUser"
        v-show="open"
        :open="open"
        @close="close"
        :title="tableTitle"
      >
        <form id="form1">
          <div class="col2">
            <div class="form-item ">
              <label for="t1">登录名:</label>
              <input
                type="text"
                id="userName"
                autocomplete="off"
                v-model="userForm.userName"
              />
            </div>
            <div class="form-item">
              <label for="t1">登陆密码:</label>
              <input
                type="text"
                id="password"
                autocomplete="off"
                v-model="userForm.password"
              />
            </div>
          </div>
          <!-- <div class="col2"> -->
          <div class="form-Oneitem">
            <label for="t1"><i class="star">*</i>中文名:</label>
            <input
              class="cnameInput"
              autocomplete="off"
              type="text"
              v-model="userForm.label"
              @blur="vaildata"
            />
          </div>
          <div class="form-Oneitem">
            <label for="t1" class="groupName">部门名:</label>
            <tree-select
              :multiple="true"
              :options="options"
              placeholder="请选择..."
              v-model="selectValue"
              @close="addChange"
            ></tree-select>
          </div>
          <!-- </div> -->
          <div class="col2">
            <div class="form-item">
              <label for="t1">状态:</label>
              <i-switch2
                text="启动|禁用"
                class="switchBox"
                :value="checkStatus1()"
                @change="switchChange"
              ></i-switch2>
            </div>
            <div class="form-item">
              <label for="t1" class="xingbie">性别:</label>
              <div class="sexBox">
                <span
                  class="outsize-radio"
                  :class="userForm.sex == 0 ? 'check-outside' : ''"
                  @click="radioClick1(0)"
                >
                  <span
                    class="radio-box"
                    :class="userForm.sex == 0 ? 'check-radio' : ''"
                  ></span
                ></span>
                <span>男</span>
                <span
                  class="outsize-radio"
                  :class="userForm.sex == 1 ? 'check-outside' : ''"
                  @click="radioClick1(1)"
                >
                  <span
                    class="radio-box"
                    :class="userForm.sex == 1 ? 'check-radio' : ''"
                  ></span
                ></span>
                <span>女</span>
              </div>
            </div>
          </div>
          <div class="col2">
            <div class="form-item">
              <label for="t1">电话号码:</label>
              <input
                type="text"
                autocomplete="off"
                id="phone"
                v-model="userForm.phone"
              />
            </div>
            <div class="form-item">
              <label for="t1">Email:</label>
              <input
                type="text"
                autocomplete="off"
                id="email"
                v-model="userForm.email"
              />
            </div>
          </div>
          <button @click="addUserMsg()">保存</button>
        </form>
      </i-table>
    </div>
    <div :class="[openEdit ? 'right' : 'right disappear']">
      <i-table
        id="addUser"
        v-show="openEdit"
        :open="openEdit"
        @close="close"
        :title="editTitle"
      >
        <form id="form2">
          <div class="form-One">
            <div>用户ID:</div>
            <div>{{ editForm.id }}</div>
          </div>
          <div class="col2">
            <div class="form-item ">
              <label for="t1">登录名:</label>
              <input
                type="text"
                autocomplete="off"
                v-model="editForm.userName"
              />
            </div>
            <div class="form-item">
              <label for="t1">登陆密码:</label>
              <input
                type="text"
                autocomplete="off"
                v-model="editForm.password"
              />
            </div>
          </div>
          <div class="form-Oneitem">
            <label for="t1"><i class="star">*</i>中文名:</label>
            <input
              class="cnameInput"
              autocomplete="off"
              type="text"
              v-model="editForm.label"
            />
          </div>
          <div class="form-Oneitem">
            <label for="t1" class="groupName">部门名:</label>
            <tree-select
              :multiple="true"
              :options="options"
              placeholder="请选择..."
              v-model="editValue"
              @close="editChange"
            ></tree-select>
          </div>
          <div class="col2">
            <div class="form-item">
              <label for="t1">状态:</label>
              <i-switch2
                text="启动|禁用"
                class="switchBox"
                :value="checkStatus2()"
                @change="switchChange"
              ></i-switch2>
            </div>
            <div class="form-item">
              <label for="t1" class="xingbie">性别:</label>
              <div class="sexBox">
                <span
                  class="outsize-radio"
                  :class="editForm.sex == 0 ? 'check-outside' : ''"
                  @click="radioClick2(0)"
                >
                  <span
                    class="radio-box"
                    :class="editForm.sex == 0 ? 'check-radio' : ''"
                  ></span
                ></span>
                <span>男</span>
                <span
                  class="outsize-radio"
                  :class="editForm.sex == 1 ? 'check-outside' : ''"
                  @click="radioClick2(1)"
                >
                  <span
                    class="radio-box"
                    :class="editForm.sex == 1 ? 'check-radio' : ''"
                  ></span
                ></span>
                <span>女</span>
              </div>
            </div>
          </div>
          <div class="col2">
            <div class="form-item">
              <label for="t1">电话号码:</label>
              <input type="text" autocomplete="off" v-model="editForm.phone" />
            </div>
            <div class="form-item">
              <label for="t1">Email:</label>
              <input type="text" autocomplete="off" v-model="editForm.email" />
            </div>
          </div>
          <button @click="editUserMsg()">保存</button>
        </form>
      </i-table>
    </div>
    <i-dialog :show="show" @cancel="cancel" :title="dialogTitle">
      <div class="modal-main">
        <div class="box">
          <label for="">父部门</label>
          <tree-select
            :options="dialogOptions"
            placeholder="请选择..."
            v-model="editDialog.dialogSelect"
          >
          </tree-select>
        </div>
        <div class="box">
          <label for="">角色Key</label>
          <input type="text" autocomplete="off" v-model="editDialog.roleKey" />
        </div>
        <div class="box">
          <label for="">部门名</label>
          <input
            type="text"
            autocomplete="off"
            v-model="editDialog.groupName"
          />
        </div>
        <div class="modal-footer">
          <button @click="editGroupMsg">保存</button>
        </div>
      </div>
    </i-dialog>
    <i-dialog :show="addGroup" @cancel="closeDialog" :title="GroupTitle">
      <div class="modal-main">
        <div class="box">
          <label for="">父部门</label>
          <span>{{ gName }}</span>
        </div>
        <div class="box">
          <label for="">子部门名</label>
          <input type="text" autocomplete="off" v-model="addDialog.groupName" />
        </div>
      </div>
      <div class="modal-footer">
        <button v-if="this.addDialog.dialogSelect" @click="addGroupMsg">
          保存
        </button>
        <button v-if="!this.addDialog.dialogSelect" @click="addAllGroup">
          保存
        </button>
      </div>
    </i-dialog>
    <i-sort :show="sortDialog">
      <div class="modal-main" v-if="USortMsg.length !== 0 ? 1 : 0">
        <div class="modal-title">用户排序</div>
        <draggable
          v-model="USortMsg"
          chosenClass="chosen"
          forceFallback="true"
          group="people"
          animation="500"
        >
          <transition-group>
            <div class="item" v-for="(item, index) in USortMsg" :key="item.id">
              {{ item.label }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="modal-main" v-if="GSortMsg.length !== 0 ? 1 : 0">
        <div class="modal-title">部门排序</div>
        <draggable
          v-model="GSortMsg"
          chosenClass="chosen"
          forceFallback="true"
          group="people"
          animation="1000"
        >
          <transition-group>
            <div class="item" v-for="item in GSortMsg" :key="item.id">
              {{ item.label }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="modal-footer">
        <button @click="sortCancel">取消</button>
        <button @click="sortSubmit">确认</button>
      </div>
    </i-sort>
  </div>
</template>
<script>
import { bus } from "../../bus";
import ITable from "./components/table";
import ISwitch2 from "./components/switch2";
import IDialog from "./components/dialog";
import ISort from "./components/sort";
import IRadio from "./components/radio";
import ITree from "./components/tree";
import draggable from "vuedraggable";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: {
    ITree,
    ITable,
    IDialog,
    ISwitch2,
    TreeSelect,
    IRadio,
    ISort,
    draggable
  },

  data() {
    return {
      show: false,
      open: false,
      openEdit: false,
      sex: "",
      sortDialog: false,
      showChild: true,
      addGroup: false,
      GroupTitle: "添加部门",
      value: "",
      icon: "fa fa-angle-down",
      userMessage: [],
      dialogTitle: "",
      tableTitle: "",
      editTitle: "",
      searchUserName: "",
      flag: "false",
      selectValue: [],
      editValue: [],
      addDialogSelect: [],
      options: [],
      USortMsg: [],
      GSortMsg: [],
      getId: "",
      getPid: "",
      gPid: "",
      gName: "",
      editDialog: {
        dialogSelect: ["00"],
        roleKey: "",
        groupName: ""
      },
      addDialog: {
        dialogSelect: "",
        groupName: ""
      },
      dialogOptions: [
        {
          id: "00",
          label: "无"
        }
      ],
      userForm: {
        userName: "",
        password: "",
        label: "",
        status: "0",
        pid: "",
        sex: "0",
        phone: "",
        email: "",
        classify: "1"
      },
      editForm: {
        pid: "",
        status: "",
        allPid: ""
      },
      treeData: []
    };
  },
  created() {
    this.showTree();
    this.searchGroup();
  },
  mounted() {
    bus.$on("getG", res => {
      this.getId = res;
      this.getGroup();
    });
    bus.$on("getU", res => {
      this.getId = res;
      this.getUserMessage();
      // }
    });
    bus.$on("getS", res => {
      this.getPid = res;
      this.getGSortMsg();
      this.getUSortMsg();
    });
    bus.$on("deleteG", res => {
      this.deleteGroup(res);
      // console.log('dg2222',res);
    });
    bus.$on("deleteU", res => {
      this.deleteUser(res);
      // console.log('du111',res);
    });
    bus.$on("addG", res => {
      this.getAddGroupMsg(res);
      // console.log('du111',res);
    });
  },
  watch: {
    showChild: function() {
      if (this.showChild == true) {
        this.icon = "fa fa-angle-down";
      } else {
        this.icon = "fa fa-angle-right";
      }
    }
  },
  methods: {
    //关闭修改部门弹窗
    cancel() {
      this.show = false;
    },
    //表单---名字验证
    vaildata() {
      if (this.userForm.label == "") {
        alert("请输入名字!");
      }
      // console.log(this.userForm.label.length);
      else if (this.userForm.label.length < 3) {
        alert("名字小于3位，请重新输入");
      }
    },
    //打开新建用户表单
    openUser() {
      var table = document.querySelector(".right");
      table.style.display = "block";
      this.show = false;
      this.tableTitle = "新增用户";
      this.openEdit = false;
      this.open = true;
      this.open = true;
    },
    //添加用户的部门选择树，关闭后触发的事件
    addChange() {
      // this.userForm.pid = this.selectValue.toString();
      this.userForm.allPid = this.selectValue.toString();
    },
    //修改用户的部门选择树，关闭后触发的事件
    editChange() {
      this.editForm.allPid = this.editValue.toString();
    },
    //新增/修改用户表单的关闭事件
    close() {
      this.open = false;
      this.openEdit = false;
      this.resetForm1();
    },
    //重置添加部门表单
    resetForm1() {
      (this.userForm = {
        userName: "",
        password: "",
        label: "",
        status: "0",
        pid: "",
        sex: "0",
        phone: "",
        email: "",
        classify: "1"
      }),
        (this.selectValue = []);
    },
    //新增部门弹窗的关闭事件
    closeDialog() {
      this.addGroup = false;
    },
    //性别单选框，选择男性的触发事件
    radioClick1(sex) {
      this.userForm.sex = sex;
    },
    //性别单选框，选择女性的触发事件
    radioClick2(sex) {
      this.editForm.sex = sex;
    },
    //状态开关的触发事件
    switchChange(val) {
      if (val == true) {
        this.userForm.status = "0";
        this.editForm.status = "0";
      } else if (val == false) {
        this.userForm.status = "1";
        this.editForm.status = "1";
      } else {
        this.userForm.status = "";
      }
    },
    //排序弹窗的关闭事件
    sortCancel() {
      this.sortDialog = false;
      this.USortMsg = [];
      this.GSortMsg = [];
    },
    //排序弹窗的提交事件
    async sortSubmit() {
      //部门排序
      if (this.GSortMsg.length !== 0) {
        for (let j = 0; j < this.GSortMsg.length; j++) {
          this.GSortMsg[j].sort = j;
          const res = await this.$curl.post("/api/public/postGSort", {
            id: this.GSortMsg[j].id,
            sort: this.GSortMsg[j].sort
          });
          // console.log(112233);
          if ((this.USortMsg.length == 0 && j == this.GSortMsg.length - 1)) {
            console.log("部门排序修改成功");
            this.sortDialog = false;
            this.showTree();
            this.GSortMsg = [];
          }
        }
      }
      //用户排序
      for (let i = 0; i < this.USortMsg.length; i++) {
        this.USortMsg[i].sort = i;
        const res = await this.$curl.post("/api/public/postUSort", {
          id: this.USortMsg[i].id,
          sort: this.USortMsg[i].sort
        });
        if (i == this.USortMsg.length - 1) {
          this.$Notice.success({ title: "提交成功" });
          // console.log(112233333);
          this.sortDialog = false;
          this.showTree();
          this.USortMsg = [];
          this.GSortMsg = [];
        }
      }
    },
    //判断新增用户中状态按钮的变化
    checkStatus1() {
      if (this.userForm.status == "0") {
        return true;
      } else if (this.userForm.status == "1") {
        return false;
      } else {
        return;
      }
    },
    //根据从服务器传来的数据，判断状态按钮的开关
    checkStatus2() {
      if (this.editForm.status == "0") {
        return true;
      } else if (this.editForm.status == "1") {
        return false;
      } else {
        return;
      }
    },
    //删除部门
    async deleteGroup(id) {
      const res = await this.$curl.get("/api/public/deleteGroup", { id: id });
      this.showTree();
      this.$Notice.success({ title: "删除成功" });
    },
    //删除用户
    async deleteUser(id) {
      const res = await this.$curl.get("/api/public/deleteUser", { id: id });
      this.showTree();
      this.$Notice.success({ title: "删除成功" });
    },
    //获取左侧树形的数据
    async showTree() {
      try {
        const res = await this.$curl.get("/api/public/getTree");
        this.treeData = res;
      } finally {
      }
    },
    //根据搜索框内容，模糊搜索
    searchUser() {
      if (this.flag) {
        if (this.searchUserName.length == 0) {
          this.showTree();
        } else {
          this.treeData = this.rebuildData(this.searchUserName, this.treeData);
          this.showChild = true;
          // console.log(this.treeData);
        }
      }
    },
    //模糊搜索（整理数据）
    rebuildData(value, arr) {
      let newarr = [];
      arr.forEach(item => {
        // console.log(item.id, item.label.indexOf(value));
        item.expand = 1;
        item.icon = "fa fa-angle-down";
        if (item.label.indexOf(value) != -1) {
          newarr.push(item);
        } else {
          if (item.children && item.children.length > 0) {
            let redata = this.rebuildData(value, item.children);
            let obj = {
              ...item,
              children: redata
            };
            if (redata && redata.length > 0) {
              newarr.push(obj);
            }
          }
        }
      });
      return newarr;
    },
    //获取新增部门弹窗的信息
    async getAddGroupMsg(id) {
      const res = await this.$curl.get("/api/public/searchGroupMsg", {
        id: id
      });
      this.addDialog.dialogSelect = res[0].id;
      this.gName = res[0].label;
      this.open = false;
      this.openEdit = false;
      this.addGroup = true;
    },
    //获取选中部门的信息
    async getGroup() {
      const res = await this.$curl.get("/api/public/searchGroupMsg", {
        id: this.getId
      });
      this.open = false;
      this.openEdit = false;
      this.show = true;
      res[0].pid
        ? (this.editDialog.dialogSelect = res[0].pid.toString().split(" "))
        : (this.editDialog.dialogSelect = "00");
      this.editDialog.roleKey = res[0].roleKey;
      this.editDialog.groupName = res[0].label;
      this.dialogTitle = "编辑部门";
    },
    //获取选中用户的信息
    async getUserMessage() {
      const res = await this.$curl.get("/api/public/getUser", {
        id: this.getId
      });
      var table = document.querySelectorAll(".right");
      table[1].style.display = "block";
      this.show = false;
      this.open = false;
      this.editTitle = "用户编辑";
      this.openEdit = true;
      this.editForm = res;
      if (res.allPid.indexOf(",") == -1) {
        this.editValue = res.allPid.split("");
      } else {
        this.editValue = res.allPid.split(",");
      }
    },
    //点击排序后，获取所有部门（根节点）的信息
    async getAllSortMsg() {
      const res = await this.$curl.get("/api/public/searchGSortMsg", {
        pid: 0
      });
      this.GSortMsg = res;
      this.open = false;
      this.openEdit = false;
      this.sortDialog = true;
    },
    //获取选中的部门内的用户排序
    async getUSortMsg() {
      const res = await this.$curl.get("/api/public/searchUSortMsg", {
        pid: this.getPid
      });
      this.USortMsg = res;
      this.sortDialog = true;
    },
    //获取选中的部门内的用子部门排序
    async getGSortMsg() {
      const res = await this.$curl.get("/api/public/searchGSortMsg", {
        pid: this.getPid
      });
      this.GSortMsg = res;
      // console.log(332211, this.GSortMsg);
    },
    //获取（根节点）部门的信息，用在弹窗的部门选择器上
    async searchGroup() {
      const res = await this.$curl.get("/api/public/searchGroup");
      this.options = res;
      this.dialogOptions = this.dialogOptions.concat(res);
    },
    //点击下拉的图标变化
    changeShow() {
      this.showChild = !this.showChild;
    },
    //点击所有部门的添加按钮，修改弹窗的标题
    openAllGroup() {
      this.gName = "所有部门";
      this.open = false;
      this.openEdit = false;
      this.addGroup = true;
    },
    //在跟节点中添加部门
    async addAllGroup() {
      try {
        const res = await this.$curl.post("/api/public/addGroup", {
          classify: 0,
          pid: 0,
          label: this.addDialog.groupName
        });
        this.$Notice.success({ title: "提交成功" });
        return res;
      } finally {
        this.showTree();
        this.addDialog.groupName = "";
        this.addGroup = false;
      }
    },
    //新增部门
    async addGroupMsg() {
      try {
        const res = await this.$curl.post("/api/public/addGroup", {
          classify: 0,
          pid: this.addDialog.dialogSelect,
          label: this.addDialog.groupName
        });
        this.$Notice.success({ title: "提交成功" });
        // return res;
      } finally {
        this.showTree();
        this.searchGroup();
        this.addDialog.groupName = "";
        this.addDialog.dialogSelect = "";

        this.addGroup = false;
      }
    },
    //提交修改部门
    async editGroupMsg() {
      try {
        const res = await this.$curl.post("/api/public/updateGroup", {
          classify: 0,
          id: this.getId,
          pid: this.editDialog.dialogSelect,
          label: this.editDialog.groupName,
          roleKey: this.editDialog.roleKey
        });
        this.$Notice.success({ title: "提交成功" });
        // return res;
      } finally {
        this.showTree();
        this.searchGroup();
        this.show = false;
        this.userForm = [];
      }
    },
    //新增用户
    async addUserMsg() {
      this.selectValue.forEach(async item => {
        this.userForm.pid = item * 1;
        // console.log(this.userForm.pid);
        const res = await this.$curl.post("/api/public/addUser", {
          allPid: this.userForm.allPid,
          classify: 1,
          email: this.userForm.email,
          expand: this.userForm.expand,
          icon: this.userForm.icon,
          label: this.userForm.label,
          password: this.userForm.password,
          phone: this.userForm.phone,
          pid: this.userForm.pid,
          sex: this.userForm.sex,
          status: this.userForm.status,
          userName: this.userForm.userName
        });
        if (item == this.selectValue[this.selectValue.length - 1]) {
          this.open = false;
          this.showTree();
          this.$Notice.success({ title: "新增成功" });
          this.resetForm1();
        }
      });
    },
    //提交修改用户
    async editUserMsg() {
      this.editValue.forEach(async item => {
        this.editForm.pid = item * 1;
        const res = await this.$curl.post("/api/public/updateUser", {
          allPid: this.editForm.allPid,
          id: this.editForm.id,
          email: this.editForm.email,
          label: this.editForm.label,
          password: this.editForm.password,
          phone: this.editForm.phone,
          pid: this.editForm.pid,
          sex: this.editForm.sex,
          status: this.editForm.status,
          userName: this.editForm.userName,
          tid: this.editForm.tid
        });
        if (item == this.editValue[this.editValue.length - 1]) {
          this.showTree();
          this.openEdit = false;
          this.$Notice.success({ title: "修改成功" });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
button input {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
}

.bigBox {
  margin-top: 1.25rem;
  margin-left: 1.25rem;
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    padding: 1rem 0 1rem 1rem;
    box-sizing: border-box;
    background-color: #404954;
    width: 20%;
    height: 95%;
    position: fixed;
    left: 75px;
    overflow: auto;
    button {
      width: 4.375rem;
      height: 1.625rem;
      background-color: #4baa4e;
      color: #fff;
      outline: none;
      border-radius: 3px;
      border: 0;
      padding: 0;
    }
    .fa-search {
      position: absolute;
      right: 1.875rem;
      top: 1.4375rem;
    }
    input {
      position: absolute;
      right: 1rem;
      top: 0.875rem;
      width: 11.25rem;
      height: 1.875rem;
      border: 1px solid rgb(118, 125, 134);
      border-radius: 0.3125rem;
      padding: 0 5px;
      box-sizing: border-box;
      color: #fff;
      background-color: #404954;
    }
    input:hover,
    input:focus {
      border: 0.1px solid #4baa4e;
      box-shadow: 0 0 3px #4baa4e;
    }
    input::-webkit-input-placeholder {
      color: #ccc;
    }
    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #ccc;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #ccc;
    }
    input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #ccc;
    }
    .tree-wrapper {
      border-top: 2px solid rgba(118, 125, 134, 0.3);
      margin-top: 1.3rem;
      padding: 0.5rem 0;
      box-sizing: border-box;
      i {
        height: 18px;
        width: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .item {
    padding: 6px;
    box-sizing: border-box;
    background-color: #37404a;
    // border: 1px solid rgb(118, 125, 134);
    margin-bottom: 5px;
    cursor: move;
  }
  .item:hover {
    color: #4baa4e;
    background-color: rgba(196, 190, 190, 0.5);
  }
  /*选中样式*/
  .chosen {
    border: solid 2px #3089dc !important;
    // background-color: powderblue;
  }
  .outsize {
    width: 100%;
    display: flex;
    height: 1.875rem;
    align-items: center;
    margin-bottom: 0.3125rem;
    i {
      height: 1.875rem;
      width: 1.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .one-list {
    display: flex;
    margin: 10px 0;
    width: 100%;
    height: 1.875rem;
    align-items: center;
    .list {
      background-color: #4baa4e;
      height: 100%;
      width: 2px;
      display: none;
    }
  }

  .checkbox-title {
    display: flex;
    width: 55%;
    height: 100%;
    align-items: center;
    span {
      display: inline-block;
      width: 10rem;
      height: 100%;
      line-height: 1.875rem;
    }
    .btn {
      position: absolute;
      right: 1rem;
      display: none;
      .leftBox-btn {
        width: 3.3rem !important;
        background-color: #4baa4e;
        height: 1.5rem !important;
        border-radius: 5px !important;
        color: #fff;
        margin-left: 8px;
      }
    }
  }
  .one-list:hover {
    background-color: rgba(106, 110, 114, 0.3);
    .fa-user-o {
      color: #4baa4e;
    }
    .checkbox-title {
      color: #4baa4e;
    }
    .btn {
      display: block;
    }
  }
  .right {
    margin-left: 1.25rem;
    box-sizing: border-box;
    background-color: #404954;
    width: 75%;
    display: none;
    height: 95%;
    position: absolute;
    right: 160px;
    animation: first 0.3s;
    -webkit-animation: first 0.3s; /* Safari and Chrome */
    animation-fill-mode: both;
  }
  @keyframes first {
    0% {
      right: -1450px;
    }
    100% {
      right: 0;
    }
  }

  @-webkit-keyframes first /* Safari and Chrome */ {
    0% {
      display: block;
      right: -90.625rem;
    }
    100% {
      display: block;
      right: 0;
    }
  }
  .disappear {
    animation: ending 0.3s;
    -webkit-animation: ending 0.3s;
    animation-fill-mode: both;
  }
  @keyframes ending {
    0% {
      opacity: 1;
      right: 0;
    }
    100% {
      opacity: 0;
      right: -90.625rem;
    }
  }

  @-webkit-keyframes ending /* Safari and Chrome */ {
    0% {
      opacity: 1;
      right: 0;
    }
    100% {
      opacity: 0;
      right: -90.625rem;
    }
  }
}
</style>